<template>
	<view class="goodies">
		<!-- 顶部搜索框 -->
		<!-- <nav-bar class="g_top" isBack backColor="#fff">
			<view class="g_tCan" slot="center">
				<view class="g_tBg"></view>
				<view class="g_tInput">
					<view class="g_tIcon iconfont icon-search"></view>
					<input type="text" confirm-type="search" v-model="searchVal" @confirm="searchData" placeholder="搜索我的订单" placeholder-class="placeholder" />
				</view>
			</view>
		</nav-bar> -->
		<nav-bars class="i_top" bgColor="#fff" fontColor="#000">
			<view class="i_tCan" slot="default">
				<view class="i_tInput">
					<view class="i_tIcon iconfont icon-search"></view>
					<input type="text" confirm-type="search" v-model="searchVal" @confirm="searchData" placeholder="搜索我的订单"
						placeholder-class="placeholder" />
				</view>
			</view>
		</nav-bars>
		
		<!-- 内容 -->
		<view class="g_contain">
			<view class="s_cTabs">
				<view class="s_ctItem" v-for="(item,index) in carTypes" :class="{active:current==index}" :data-current="index" @tap="tabChange">{{item.name}}<text></text></view>
			</view>
			<view class="s_cCan">
					<!-- 商品 -->
						<view class="i-product" v-for="(item, index) in 5" v-if="current==index">
						 <scroll-view class="s_dList" scroll-y @scrolltolower="scrolldata">
						    <view class="no-card" v-if="list.length==0">
						        <image src="../../../static/demo/suess.png"></image>
						        <view class="no-title">您还没有订单哦~~</view>
						        <text>快去逛一逛吧~</text>
						    </view>
						    <view class="i-product-list" v-for="(item,index) in list" :key="index">
						        <view class="card_top">
						            <navigator class="store" url="">
						                <view class="store-name ell">{{item.store_name}}</view>
						                <i class="iconfont icon-more"></i>
						            </navigator>
						            <view class="item-status" :class="'status-'+ item.order_status">{{status[item.order_status]}}</view>
						        </view>
								<view class="orderid">订单编号:{{item.order_code}}</view>
						        <view class="goods_card" v-for="(items,indexs) in item.orderItems" :key="indexs">
						            <image @tap="orderDetail(item.order_code)" class="img"  lazyLoad="true" mode="aspectFill" :src="items.main_imgurl"></image>
						            <view class="card_right" @tap="orderDetail(item.order_code)" >
						                <view class="title ell-2">{{items.product_title}}</view>
						                <view class="price">￥{{items.price}}</view>
										<view class="futitle">
											<view v-for="(attr_params,index) in items.attr_params" style="display: inline-block;">
												<text v-if="attr_params.attr_name">{{attr_params.attr_name}}{{attr_params.attr_value}}</text>
												<text v-if="attr_params.key">{{attr_params.key}}{{attr_params.value}}</text>
											</view>
											<view class="titlenum">x{{items.num}}</view>
									    </view>
						            </view>
						        </view>
						        <view class="goods_price">总价:￥{{item.price ||0.00}} <text v-if="item.is_many_way == 1">定金:￥{{item.deposit_price || 0.00}}</text></view>
								<view class="card_bottom" v-if="item.order_status == 1">
									<text class="order-bnt" @click="gitpouchatshow(item.config_id,item.config_url)">联系商家</text>
								    <text class="order-bnt" @click="cancelOrder(item.order_code)">取消订单</text>
									<text class="order-bnt" @click="payModel(item,item.order_code)">立即付款</text>
								</view>
								<view class="card_bottom" v-if="item.order_status == 2">
									<text class="order-bnt" @click="gitpouchatshow(item.config_id,item.config_url)">联系商家</text>
									<text class="order-bnt" v-if="item.is_many_way == 1&&item.balance_status == 0" @click="payModel(item,item.order_code)">付尾款</text>
								</view>
								<view class="card_bottom" v-if="item.order_status == 3">
									<text class="order-bnt" @click="gitpouchatshow(item.config_id,item.config_url)">联系商家</text>
									<text class="order-bnt" v-if="item.arrive_status == 0" @click="confirms(item,item.order_code)">确认收货</text>
									<text class="order-bnt" v-if="item.is_many_way == 1 && item.balance_status == 0" @click="payModel(item,item.order_code)">付尾款</text>
								</view>
								<view class="card_bottom" v-if="item.order_status == 4">
									<text class="order-bnt" @click="gitpouchatshow(item.config_id,item.config_url)">联系商家</text>
								    <text class="order-bnt" @click="deleteOrder(item.order_code)">删除订单</text>
								</view>
								<view class="card_bottom" v-if="item.order_status == 5">
									<text class="order-bnt" @click="gitpouchatshow(item.config_id,item.config_url)">联系商家</text>
								    <text class="order-bnt" @click="deleteOrder(item.order_code)">删除订单</text>
								</view>
						    </view>
							<view class="no-line" v-if="list.length>0">我是有底线的~~</view>
						 </scroll-view>
						</view>
		    </view>				
		</view>
		
		
		<!-- 二维码 -->
		<view class="qrcodepop" :style="showModal?'':'display:none;'">
			<view class="qrcodecont">
				<view class="qrname">
					<view>核销二维码</view>
					<view><canvas  canvas-id="myQrcode"></canvas></view>
				</view>
				<view class="iconfont icon-close" @click="handleHideCodeClick"></view>
			</view>
		</view>
		<!-- 微信客服 -->
		<view class="pouchat" v-if="pouchatshow">
		  <view class="poucont">	
			<view class="chatlist">
				<view class="noes"v-if="!config_url && !config_id">暂时未配置客服，请见谅!</view>
				<view class="chatml" @click="gitwxchat()" v-if="config_url">
					<image src="https://manager.ryz1620.com/static/my/wxchat.png" mode="widthFix"></image>
					<text class="t1">在线微信客服</text>
					<text class="t2">可直接联系客服</text>
				</view>
				<view class="chatml" v-if="config_id">
					<cell class="cell-service" bind:startmessage='startmessage' bind:completemessage="completemessage" :plugid="config_id"/>
					<image src="https://manager.ryz1620.com/static/my/codechat.png" mode="widthFix"></image>
					<text class="t1">添加微信客服</text>
					<text class="t2">扫微信二维码</text>
				</view>
			</view>
			<view class="iconfont icon-close" @click="wxCodeClick"></view>
		  </view>	
		</view>
	</view>
</template>

<script>
import URL from '@/config/url.js'
import navBar from '@/components/navBar/navBar.vue'
import service_mall from '@/service/now.js'
const qrCode = require('@/utils/weapp-qrcode.js')
export default {
	components: { navBar,
	// #ifdef MP-WEIXIN
				"cell": "plugin://contactPlugin/cell",
	// #endif 
	 },
	
	data() {
		return {
			status: {
				1: "待付款",
				2: "待发货",
				3: "待收货",
				4: "已完成",
				5: "已关闭"
			},
			carTypes:[
				{
				  name:'全部'
				},
				{
				  name:'待付款'
				},
				{
				  name:'待发货'
				},
				{
				  name:'待收货'
				},
				{
				  name:'已完成'
				},
			],
			current:0,
			list:[],
			searchVal:'',
			page:1,
			order_status:'',
			listcount:'',
			listnum:'',
			code:'',
			showModal: false,
			tapIndex:'',
			terminal:"",
			config_id:'',
			config_url:'',
			pouchatshow:false,
		}
	},
	onShow() {
	  this.page = 1
	  this.list = []
	  this.getList()
		  
	},
	onLoad() {
		//#ifdef MP-WEIXIN
			this.terminal = "wxapplet";
		//#endif
	},
	methods: {
		gitpouchatshow(config_id,config_url){
			this.config_id = config_id,
			this.config_url = config_url,
			this.pouchatshow = true
		},
		wxCodeClick(){
			this.config_id = '',
			this.config_url = '',
			this.pouchatshow = false
		},
		gitwxchat(){
			wx.openCustomerServiceChat({
			  extInfo: {url: this.config_url},
			  corpId: this.$env.CORPID,
			  success(res) {}
			})
		},
		scrolldata(){
			if(this.listcount > this.listnum){
					this.page++,
					this.getList()
			}
		},
		toCustomer(id){
			uni.navigateTo({
				url:'/pages_customer/pages/index?partner_type=shop&partner_id=' + id
			})	
		},
		orderDetail(id){
			uni.navigateTo({
				url:'/pages_now/pages/mall/order/detail?orderid=' + id
			})
		},
		// 订单列表
		getList() {
			uni.showLoading('加载中')
			service_mall.getupOrderlist({
				 page:this.page,
				 pagesize:10,
				 order_status:this.order_status,
				 keyword:this.searchVal
			})
				.then(res => {
					if(res.code == 1){
						uni.hideLoading();
						 for(var i=0;i<res.data.products.length;i++){
							this.list.push(res.data.products[i]); // 加载的数据追加在上一页后面
						 }
						 this.listcount = res.data.count
						 this.listnum = this.list.length
					}
				})
				.catch(err => {
					
				})
		},
		// 选择支付方式
		payModel(item,id){
			    let itemList = [ "微信支付", "线下支付"]
				this.itemList = itemList
		        uni.showActionSheet({
		            itemList: this.itemList,
		            success: (t) => {
						this.tapIndex = t.tapIndex+1
				        this.getpayorder(item.order_code)	
					}
		        });
		 },
		initQrCode:function(){
			new qrCode('myQrcode', {
				text: this.code,
				width: 160,
				height: 160,
				colorDark: "#333333",
				colorLight: "#FFFFFF",
				correctLevel: qrCode.CorrectLevel.H
			})
		},
		handleShowCodeClick:function(){
			this.showModal = true
			this.$nextTick(function(){
				this.initQrCode()
			})
		},
		handleHideCodeClick:function(){
			this.showModal = false
		},
		getpayorder(order_codes){
			service_mall.getpay({
				order_no:order_codes,
				type:'purchase_order',
				pay_type:this.tapIndex
				}).then(res=>{
				if(res.code == 1){
					let data = res.data
				    if(this.tapIndex == 1){	
						if(this.terminal == 'wxapplet'){
							uni.requestPayment({
								appId:res.data.appId,
								nonceStr: res.data.nonceStr,
								package: res.data.package,
								paySign: res.data.paySign,
								signType: res.data.signType,
								timeStamp: res.data.timeStamp,
								success: (suc) => {
									uni.navigateTo({
										url: "/pages_now/pages/mall/order/sucess?type=1" + '&order_no=' + order_codes
									})
								},
								fail: (err) => {
									uni.navigateTo({
										url: "/pages_now/pages/mall/order/sucess?type=0" + '&order_no=' + order_codes
									})
								}
							});
						}else{
							uni.requestPayment({
								provider: 'wxpay',
								orderInfo: {
									"appid":res.data.appid,
									"partnerid": res.data.partnerid,
									"prepayid": res.data.prepayid,
									"noncestr": res.data.noncestr,
									"package": res.data.package,
									"timestamp": res.data.timestamp,
									"sign": res.data.sign,
								},
								success: (suc) => {
									uni.navigateTo({
										url: "/pages_now/pages/mall/order/sucess?type=1" + '&order_no=' + order_codes
									})
								},
								fail: (err) => {
									console.log(err,12345)
									uni.navigateTo({
										url: "/pages_now/pages/mall/order/sucess?type=0" + '&order_no=' + order_codes
									})
								}
							});
						}
					}else{
						this.code = res.data.verificationCode
						this.handleShowCodeClick()
					}
									
				}else{
						this.failMsg(res)
				}	
			})
		},
		// 确认收货
		confirms(item,id){
			uni.navigateTo({
				url:"/pages_now/pages/mall/order/confirmorder?orderid=" + id
			})			
		},
		// 删除订单
		deleteOrder(id) {
			let that = this
			uni.showModal({
				title: "提示！",
				content: "是否删除该订单",
				success: function(i) {
					if (i.confirm) {
						uni.showLoading('正在删除...')
						service_mall.getdelProductOrder({
							 order_code:id,
						}).then(res => {
							uni.hideLoading();
							if (res.code == 1) {
								that.list = []
								that.page =1
								that.getList();
							}else{
								uni.showToast({title: "删除失败！", icon: "none"});
							}
						});
					}
				}
			});
		},
		// 取消订单
		cancelOrder(id) {
			let that = this
			uni.showModal({
				title: "提示！",
				content: "是否取消该订单",
				success: function(i) {
					if (i.confirm) {
						service_mall.getupOrdercancel({
							order_code:id,
						}).then(res => {
							if (res.code == 1) {
								that.list = []
								that.page =1
								that.getList();
							}else{
								uni.showToast({title: "取消失败！", icon: "none"});
							}
						});
					}
				}
			});
		},
		tabChange(e){
				var index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.current=index;
				this.order_status = index
				this.list = []
				this.getList();
		},
        searchData(){
			this.page = 1
			this.list = []
			this.getList()
		},
		// 跳转分类所属商品列表
		intoStore(cateId){
			uni.navigateTo({ url:'/pages_now/pages/mall/goods/list?cate_id_lst=' + cateId })
		},
	}
}
</script>

<style lang="scss" scoped>
.goodies {height: 100vh;display: flex;flex-flow: column;
	// 顶部搜索框
	.g_top {position: relative;z-index: 100;
		.g_tCan {width: 100%;height: 66rpx;padding-right: 24rpx;}
		.g_tBg {width: 100vw;height: 224rpx;background: linear-gradient(135deg, #2e333f 0%, #191d29 100%);position: fixed;top: 0;left: 0;z-index: -1;}
		.g_tInput {height: 66rpx;border-radius: 34rpx;background: #fff;position: relative;opacity: .8;
			& > input {width: 100%;height: 100%;font-size: 24rpx;padding-left: 72rpx;}
		}
		.g_tIcon {width: 32rpx;height: 32rpx;line-height: 32rpx;color: #6c6c6c;font-size: 32rpx;position: absolute;top: 18rpx;left: 32rpx;}
	}
	
	// 内容
	.g_contain {background: #fff;overflow: hidden;display: flex;flex-flow: column;flex: 1;
		.s_cTabs {position: relative;display: flex;z-index: 500;
			&::after {content: "";width: 100%;height: 1px;background: rgba(0, 0, 0, .08);position: absolute;bottom: 0;left: 0;z-index: 2;}
			.s_ctItem {font-size: 30rpx;color: #333;  display: flex;justify-content: center;align-items: center;flex: 1;line-height: 100rpx;
				&.active {font-weight: bold;position: relative;
				 text{
					width: 40rpx;height: 5rpx;border-radius: 4rpx 4rpx;background: #fff;position: absolute;bottom: 0;    left: 50%;margin-left: -20rpx;z-index: 1;; 
				 }
				}
			}
			.s_ctCursor {width: 40rpx;height: 8rpx;border-radius: 4rpx 4rpx;background: #ffd425;position: absolute;bottom: 0;left: 0;z-index: 1;transform: translateX(166rpx);}
		}
		// 商品/探店 swiper
		.s_cCan {flex: 1;height: 100%;
			.s_cSwiper {width: 100%;hegiht: 100%;}
			.s_cSwiper-item {width: 100%;hegiht: 100%;}
		}
		
	}
}
.no-line {
        padding: 40rpx 20rpx;
        text-align: center;
        color: #999;
        font-size: 26rpx;
    }
.tag-list {
    margin: 10rpx 0;
}
.s_dList {width: 100%;height: 100%;padding-bottom: 120rpx;}
.i-product {
    width: 100%;height: 100%;
}

.i-product-list {
    padding: 20rpx;
    position: relative;
    margin: 20rpx;
    box-shadow: 4rpx 4rpx 10rpx 4rpx #eee;
    border-radius: 10rpx;
    background-color: #fff;
}

.img {
    border-radius: 8rpx;
    width: 170rpx;
    height: 170rpx;
    flex-shrink: 0;
    background-color: #f6f6f6;
}

.goods_card {
    display: flex;
    padding-top: 20rpx;
    align-items: center;
}

.card_right {
    font-size: 26rpx;
    padding-left: 30rpx;
    width: 100%;
    min-width: 300rpx;
    color: #807e7e;
}
.orderid{color: #999;font-size: 26rpx;}
.card_bottom {
    justify-content: flex-end;
}

.card_bottom,.card_top {
    display: flex;
    align-items: center;
	padding: 15rpx 0;
}

.card_top {
    justify-content: space-between;
    font-size: 30rpx;
    padding-bottom: 10rpx;
    color: #777;
}

.item-status {
    color: #f87901;
    font-size: 28rpx;
}

.status-0,.status--1 {
    color: red;
}

.status-3 {
    color: green;
}

.title {
    width: 95%;
    font-size: 30rpx;
    color: #525050;
}

.goods_price {
    font-size: 28rpx;
    text-align: right;
    padding-bottom: 24rpx;
    padding-top: 20rpx;
}

.goods_price text {
    font-size: 32rpx;
        color: #C3AB7C;
        margin-left: 20rpx;
}

.pay-for {
    border: 2rpx solid #C3AB7C;
	padding: 8rpx 30rpx;
	color: #C3AB7C;
	border-radius: 40rpx;
	font-size: 30rpx;
	margin-left: 20rpx;
}

.order-bnt {
    border: 2rpx solid #505050;
    color: #505050;
    border-radius: 40rpx;
}

.order-bnt,.order-comfirm {
    padding: 8rpx 20rpx;
    font-size: 30rpx;
    margin-left: 20rpx;
}

.order-comfirm {
    border: 4rpx solid #e79e00;
    color: #eea301;
    background-color: #faf5e9;
    border-radius: 8rpx;
}

.index {
    position: fixed;
    left: 10rpx;
    bottom: 10rpx;
    width: 80rpx;
    height: 80rpx;
    line-height: 80rpx;
    color: #fff;
    font-size: 26rpx;
    text-align: center;
    background-color: rgba(0,0,0,.5);
    border-radius: 50%;
}

.tag {
    padding: 6rpx 14rpx;
    border-radius: 8rpx;
    font-size: 22rpx;
    color: green;
    background-color: #f5fff5;
    margin-right: 14rpx;
	    display: inline-block;
}

.group-icon {
    font-size: 22rpx;
    padding: 0;
	display: inline-block;
}

.price {
    padding-top: 18rpx;
}
.futitle {
    padding-top: 18rpx;
}
.titlenum{
	display: inline-block;
	float: right;
}
.no-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 20rpx 20rpx 0 0;
    padding-top: 40rpx;
}

.no-title {
    padding: 30rpx 0;
}

.no-card>text {
    font-size: 24rpx;
    color: #999;
}

.no-bnt {
    padding: 10rpx 20rpx;
    margin: 20rpx;
    border: 2rpx solid #eee;
    font-size: 26rpx;
    background-color: #fff;
}

.no-card image {
    height: 232rpx;
    width: 288rpx;
    padding: 40rpx;
}

.store {
    display: flex;
    align-items: center;
    width: 400rpx;
    background-color: #fff;
}

.store image {
    width: 40rpx;
    height: 40rpx;
    padding-right: 20rpx;
    flex-shrink: 0;
}

.store-name {
    font-weight: 700;
    color: #000;
}
.qrcodepop{
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.2);
	z-index: 9999;
	.qrcodecont{
		width: 400rpx;
		position: absolute;
		left: 50%;
		top: 25%;
		margin-left: -200rpx;
		.qrname{
			background: #fff;
			line-height: 80rpx;
			height: 440rpx;
			overflow: hidden;
			padding: 20rpx;
			text-align: center;
			border-radius: 15rpx;
			canvas{
				width: 300rpx;
				height: 300rpx;
				margin: auto;
			}
		}
		.icon-close{
			display: block;
			font-size: 60rpx;
			color: #fff;
			text-align: center;
			margin: 30rpx auto;
		}
	}
}
	// 顶部搜索框=====
	.goodies .i_top {
		position: relative;
		z-index: 999;
		background: #fff;
		.i_tCan {
			width: 100%;
			height: 66rpx;
			// padding-left: 32rpx;
			padding-right: 24rpx;
			/* #ifndef APP-PLUS-NVUE */
			// margin-left: 34rpx;
			width: 500rpx;
			/* #endif */
			flex: 1;
			/*#ifdef H5 || MP-WEIXIN*/
			width: 400rpx;
			/*#endif*/
		}
	
		.i_tBg {
			width: 100vw;
			height: 500rpx;
			background: linear-gradient(135deg, #2e333f 0%, #191d29 100%);
			position: fixed;
			top: 0;
			left: 0;
		}
	
		.i_tInput {
			height: 66rpx;
			border-radius: 34rpx;
			background: #F6F7FB;
			position: relative;
			opacity: .8;
	
			&>input {
				width: 100%;
				height: 100%;
				font-size: 24rpx;
				padding-left: 72rpx;
			}
		}
	
		.i_tIcon {
			width: 32rpx;
			height: 32rpx;
			line-height: 32rpx;
			color: #6c6c6c;
			font-size: 32rpx;
			position: absolute;
			top: 18rpx;
			left: 32rpx;
		}
	}
// 客服弹框
		.pouchat{
			position: fixed;
			background: rgba(0,0,0,0.5);
			top:0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 9999;
			.noes{
				padding: 30rpx;
				font-size: 28rpx;
				color: #666;
			}
			.poucont{
				position: absolute;
				top:30%;
				left: 15%;
				right: 15%;
				.icon-close{
					width: 80rpx;
					height: 80rpx;
					font-size: 70rpx;
					color: #fff;
					line-height: 80rpx;
					text-align: center;
					margin: 30rpx auto;
				}
			}
			.chatlist{
				background: #fff;
				padding:30rpx;
				border-radius: 10rpx;
			}
			.chatml{
				position: relative;
				padding: 20rpx;
				padding-left: 100rpx;
				min-height: 100rpx;
				.cell-service{
					position: absolute;
					right: 0;
					bottom: 0;
					left: 0;
					top: 0;
					opacity: 0;
					z-index: 10;
					.cell--bubble{
						width: 100%;
					}
				}
				text{
					display: block;
					line-height: 40rpx;
				}
				.t1{
					font-size: 32rpx;
				}
				.t2{
					font-size: 24rpx;
					color: #999;
				}
				image{
					width: 70rpx;
					height: 70rpx;
					position: absolute;
					left: 15rpx;
					top:25rpx;
				}
			}
		}	
</style>